<template>
  <div class="input-item">
    <div class="label">{{ props.label }}</div>
    <div class="input">
      <div class="tags">
        <div class="tag"
             :class="{'active': isActive(item)}"
             v-for="(item, index) in tags"
             @click="bindTap(item)"
        >{{item.name}}</div>
      </div>
      <slot name="next"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, unref} from "vue";

const props = defineProps({
  label: String,
  tags: Array,
  modelValue: {
    type: [Array , Number , String],
    default: () => ''
  }
})

const isActive =  (item) =>  {
  return Array.isArray(props.modelValue) ? props.modelValue.includes(item.id) : props.modelValue == item.id
}

const emit = defineEmits(['update:modelValue'])
const bindTap = (item) => {
  if(Array.isArray(props.modelValue)) {
    const value = unref(props.modelValue) || []
    const index = value.indexOf(item.id)
    if(index >= 0) {
      value.splice(index,1);
    }else {
      value.push(item.id)
    }
    emit('update:modelValue', value)
  }else  {
    emit('update:modelValue', item.id)
  }

}

</script>

<style scoped lang="scss">
.input-item {
  .label {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #0D3333;
    line-height: 42rpx;
    margin: 0 0 16rpx 0;
    padding: 0 22rpx;
  }
  .input {
    display: flex;
    align-items: center;
    width: 100%;
    background: #FFFFFF;
    border-radius: 24rpx;
    .tags {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      gap: 16rpx;
      .tag {
        min-width: 124rpx;
        height: 72rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        border: 2rpx solid rgba(0,0,0,0.08);
        font-size: 24rpx;
        font-weight: 400;
        color: #0D3333;
        line-height: 72rpx;
        text-align: center;
        padding: 0 20rpx;

        &.active {
          background: rgba(36,250,246,0.16);
          border: 2rpx solid #24FAF6;
        }
      }
    }
  }
}

</style>
